Text input

Summary Text fields can be found in the following context: Full screen editor. Text field (Form). List with search. When opening a view, the text field is in "browse" mode with hidden keypad (e.g. Form). Input method can be numbers, characters, or symbols. Remember to define correct keyboard layout. No rich text editing available.

Java Form TextField TextBox TextEditor Related design guidelines Forms Search

The virtual keypad is revealed whenever the user taps on an element that requires text input. Inline editing should be applied wherever possible to show context while user is typing. Separate input states, such as data queries, are only recommended for short input situations, such as PIN code query. For inline editing, the keypad slides up from the bottom of the screen as an overlay to the screen content when phone is in portrait orientation. In landscape orientation the writing mode occupies the screen fully and thus no context is shown. Action 1 closes the keypad and returns to the initial layout. Keypad can also be closed by dragging it down.

If the input field is at the bottom of the screen, the content needs to slide up as well so that the input field is shown above the virtual keypad. The input text field is shown active and cursor is blinking when the keypad is ready for typing. The user can move the cursor by a single tap on the intended position. Horizontal drag/flick on the row in the text input moves the cursor to the left/right respectively. This is needed in case single tap is not accurate enough. The user can drag or flick the content vertically up or down. The keypad slides down if the user activates a type of field that does not require input. If the user selects successive text input fields, the keypad remains in its position. The keypad type changes as per physical orientation of the phone.

Figure 1. Virtual keypads in portrait and landscape

In portrait mode different keypad types are available: ITU-T, qwerty and (if available in device variant) language-specific input modes like Chinese handwriting. The type shown depends on the user setting selected for the writing language in use. In landscape orientation the keypad type is always qwerty. It occupies the screen fully and thus no context is shown in landscape mode.

The layout of the virtual keypad may be adapted to fit frequently used characters or strings in each context, for example @ for e-mail and .com for web addresses.

Backstepping functionality is available when user has closed the keypad. Selecting back should not make keyboard reappear, but should return to previous state. The keypad slides down at the end of the flow if it is not needed.

TextField (Form)

Figure 2. Text field in Forms

For inline text entry. Tapping on the text entry field activates the keypad. The field moves to the top of the screen. If sufficient screen real estate is available, other nearby form fields are still visible above the keypad. User is able to input text by tapping on the keypad. User is able to hide the keypad by dragging on the keypad hide bar. It is possible to drag content vertically, if there is more than 1 text field in the form. In landscape mode, if text field is pressed, the editor launches in full screen mode. Keypad is closed by tapping Action 1 ('Ok') or by dragging the keypad down. Closing the keypad returns the user to the original context, after which next actions (e.g. Send, Confirm) can be made.

Textbox

Figure 3. Basic Textbox, and Textbox in landscape

Optimised for editing longer text phrases (i.e., more than one or two words or a password). Fills the entire view. Allows one task specific function to be featured in Action 1. Both orientations are optimised for different use cases. Portrait: Header is shown. Options menu available. Action button 1 available. Context is visible. Ticker is supported. Next action (e.g. Send, Confirm) can be selected from Action 1 even if the keypad is open. Landscape: Only action button 1 available, mapped to top right side. No Options menu. More comfortable to type in and interact with than in portrait orientation. No context shown. Keypad is closed by tapping Action 1 ('Ok') or by dragging it down. Closing the keypad returns the user to the original context, after which the next action (e.g. Send, Confirm) can be selected from Action 1 (or Options list).

Textbox with ticker
Figure 4. Textbox with ticker	Displays strings only. Placed: Under the header. Above text input field.

Canvas text editor
Figure 5. Canvas text editor in portrait and landscape	Title shows only in portrait. Landscape layout and functionality is identical to full screen view text edit layout. In portrait, the content remains scrollable. Behavior like 'Text field' in Form.